<template>
	<div class="navbar-fixed-bottom bottom-bar">
		<re-link class="display-inline text-default a-no-t bottom-bar-link text-center" v-for="menu in menus"
					 :key="menu.id" :to="menu.link" :activeClass="menu.active">
			<icon :type="menu.icon" class="bottom-bar-icon" :size="22" v-if="menu.icon !== undefined"></icon>
			<img v-if="menu.img !== undefined" :src="menu.img" class="bottom-bar-img">
			<span class="text-center bottom-bar-label">{{menu.label}}</span>
		</re-link>
	</div>
</template>

<script>
	import Icon from '../widget/Icon';
	import ReLink from '../widget/ReLink';
	export default {
		components: {
			ReLink,
			Icon},
		name: 'BottomBar',
		props: {
			menus: {type: Array}
		}
	};
</script>
